<template>
	<view class="rent-pages">
		<scroll-view class="list-container" scroll-y>
			<view class="info-item" v-for="item in list" :key="item.id" :class="'type'+item.type" @click="goPay(item)">
				<view class="rent-item" :class="menuTab==item.id?'active':''">
					<view class="rent-info">
						<image :src="imgStorage+'/login/lianzu.png'" class="info-icon"
							v-if="item.houseType.includes('廉租')">
						</image>
						<image :src="imgStorage+'/login/gongzu.png'" class="info-icon"
							v-else-if="item.houseType.includes('公租')">
						</image>
						<image :src="imgStorage+'/login/zhiguan.png'" class="info-icon"
							v-else-if="item.houseType.includes('直管')">
						</image>
						<view class="title">
							{{item.areaName||''}}{{item.streetName||''}}{{item.buildingNumber||''}}#{{item.unitNumber||''}}-{{item.floorLevel||''}}0{{item.roomNumber||''}}
						</view>
					</view>
					<view class="small-btn normal" v-if="item.id==menuTab">
						<view class="iconfont icon-wancheng"></view>
						<view class="text">当前选择</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-btn" @click="navigate('/page_pack/authentication/authentication')">没找到住房？去添加</view>
	</view>
</template>

<script>
	import {
		setStorage,
		getStorage
	} from '@/util/auth.js';
	import {
		getLoginUserFwJoinApi,
		getFwInfoByIdApi
	} from '@/api/rent_payment.js'

	export default {
		data() {
			return {
				menuTab: 1,
				list: [],
				page: '',
				type: ''
			}
		},
		methods: {
			changeMenu(data) {
				this.menuTab = data.id
				setStorage('selectInfo', data)
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				getLoginUserFwJoinApi().then((res) => {
					let list = res
					list.forEach(item => {
						if (item.houseType.includes('廉租')) {
							item.type = 1
						} else if (item.houseType.includes('公租')) {
							item.type = 2
						} else if (item.houseType.includes('直管')) {
							item.type = 3
						}
					})
					this.list = list
					if (this.list.length < 0) {
						uni.redirectTo({
							url: '/page_pack/authentication/authentication'
						});
					}
					setStorage('selectInfo', this.list[0])
				})
			},
			goPay(data) {
				// 先更新菜单选择
				this.menuTab = data.id;
				setStorage('selectInfo', data)
				// 再执行支付逻辑
				//房屋信息和承租人信息选择后直接返回上一页面
				if (this.page == 'houseInfo' || this.page == 'tenantInfo') {
					uni.navigateBack();
				} else {
					getFwInfoByIdApi({
						id: this.menuTab
					}).then((res) => {
						setStorage('selectInfo', res);
						//先交保证金
						if (res.needDepositPaid) {
							this.navigate('/page_pack/bond/bond?id=' + res.id + '&price=' + res.needDepositPaid +
								'&buildingArea=' + res.buildingArea + '&houseType=' + res.houseType +
								'&idValue=' + res.idValue + '&id=' + res.id + '&payableTotalPrice=' +
								res.payableTotalPrice)
						} else if (res.rentToBePaid || res.needPropertyFee || res.lateFee) {
							//再交房租、物业、滞纳金
							this.navigate('/page_pack/rent_payment/arrears?id=' + res.id)
						} else {
							//无欠费，进续交
							if (this.type && this.type === 1) {
								this.navigate('/page_pack/rent_payment/info')
							} else {
								this.navigate('/page_pack/property/property')
							}
						}
					})
				}
			}
		},
		onLoad(e) {
			this.type = e.type
			this.page = e.page
			this.getList()
			if (getStorage('selectInfo')) {
				let data = getStorage('selectInfo')
				this.menuTab = data.id
			} else {
				setStorage('selectInfo', this.list[0])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rent-pages {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;

		.list-container {
			flex: 1;
			overflow-y: auto;
			margin-bottom: 70rpx;
			/* 为底部按钮留出空间 */
		}

		.info-item.type1 {
			background: url('https://suzhouqu-static-1306862033.cos.ap-chengdu.myqcloud.com/suzhouHousesLease/uniapp/rent/lian_bg.png')no-repeat center;
			background-size: 100%;
		}

		.info-item.type2 {
			background: url('https://suzhouqu-static-1306862033.cos.ap-chengdu.myqcloud.com/suzhouHousesLease/uniapp/rent/gong_bg.png')no-repeat center;
			background-size: 100%;
		}

		.info-item.type3 {
			background: url('https://suzhouqu-static-1306862033.cos.ap-chengdu.myqcloud.com/suzhouHousesLease/uniapp/rent/zhi_bg.png')no-repeat center;
			background-size: 100%;
		}

		.info-item {
			height: 180rpx;
			width: 100%;
			margin-bottom: 30rpx;
			border-radius: 20rpx;

			.rent-item.active {
				border: 1px solid $theme-color;
				border-radius: 20rpx;
			}

			.rent-item {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				.rent-info {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;

					.info-icon {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}

					.title {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 100%;
						font-size: 34rpx;
						font-weight: bold;
					}
				}

				.small-btn {
					width: 170rpx;
					height: 60rpx;
					border-radius: 10rpx;

					.iconfont {
						font-size: 26rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.bottom-btn {
			position: fixed;
			bottom: 20rpx;
			left: 30rpx;
			right: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: $theme-color;
			font-size: 28rpx;
			border-radius: 10rpx;
		}
	}
</style>